<template>
	<view class="page-content">
		<radio-group class="lang" @change="radioChange">
			<label v-for="(item, index) in list" :key="index" class="lang-list">
				<view class="body-box">
					<view class="box-tit">{{ item.value }}</view>
					<radio color="#D70000" style="transform:scale(0.7)" :value="item.value" :checked="item.checked">
					</radio>
				</view>
			</label>
		</radio-group>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import store from '@/store'
	export default {
		components: {},
		data() {
			return {
				current: 0,
				list: [{
						value: '简体中文',
						checked: true,
						language: 'zh-CN'
					},
					{
						value: 'English',
						checked: false,
						language: 'en-US'
					}
				]
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onShow() {
			let items = this.list;
			let ind = uni.getStorageSync('index'),
			    lang = uni.getStorageSync('select');
			// 判断选择的语言
			if (lang) {
			    items[ind].checked = true;
			    this.$i18n.locale = lang;
			} else {
			    this.$i18n.locale = 'zh-CN';
			}
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: this.i18n.tabBar.language
			});
		},
		onLoad(option) {

		},
		methods: {
			radioChange(e) {
				let _self = this;
				let items = _self.list;
				for (let i = 0; i < items.length; i++) {
					if (items[i].value == e.target.value) {
						items[i].checked = true;
						// console.log(e.target.value);
						// console.log(items[i].value);

						// 存储选择的下标
						uni.setStorageSync('index', i);
						// 存储选择的语言
						uni.setStorageSync('select', items[i].language);
						_self.$i18n.locale = items[i].language;
						
						break;
					}
				}
				setTimeout(function() {
					uni.navigateBack();
				}, 500);
			},
		}
	}
</script>

<style lang="scss">
	.weixuanzhong {
		width: 36rpx;
		height: 36rpx;
		background: #393939;
		border: 1px solid #646464;
		border-radius: 50%;
	}

	.page-content {
		width: 100vw;
		height: 100%;
		background: $uni-bg-color;
		color: $font-color-w;
		padding: $page-row-spacing;
	}

	.body-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: $uni-bg-box-color;
		box-shadow: 0rpx 2rpx 9rpx 0rpx rgba(0, 0, 0, 0.44);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding: 30rpx 40rpx;
		color: #FFFFFF;

		.box-tit {
			display: flex;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.icons-sel {
			width: 40rpx;
			height: 40rpx;
			line-height: 42rpx;
			font-size: 42rpx;
			color: #D50000;
		}
	}
</style>
